S05-01 Library-jQuery

• jQuery 概述
  • jQuery
  • 库和框架
  • jQuery 优缺点
  • jQuery 历史
  • jQuery 历史版本
  • 为什么学习 jQuery
• 基本使用
  • CDN
  • 安装
    • 方式 1：CDN
    • 方式 2：下载源码引入
    • 方式 3：包管理器
  • 基本使用
  • 监听文档加载
  • 变量名冲突
• jQuery 函数对象
  • jQuery 函数
  • jQuery 对象
  • 对比 DOMElement
  • 与 DOMElement 的转换
  • jQuery 架构设计图
• 选择器
  • jQuery 选择器
  • 生成代码片段
  • jQuery 过滤器
  • jQuery 文本操作
  • jQuery CSS 操作
• 属性操作
  • Class 属性的操作
  • attributes 和 property 属性的操作
  • 自定义 data-xx 属性的操作
• DOM 操作
  • jQuery 的 DOM 操作-插入内容
  • jQuery 的 DOM 操作-移除/替换/克隆
• 事件
  • 认识事件（Event）
  • click 和 on 的区别
  • click 和 on 中 this 指向
  • jQuery 的事件冒泡
  • jQuery 的事件对象( Event Object)
  • jQuery 的事件委托（event delegation）
  • jQuery 常见的事件
  • mouseover 和 mouseenter 的区别
  • jQuery 的键盘事件
  • jQuery 的表单事件
  • jQuery-选项卡切换
• 动画
  • jQuery 动画操作-animate
  • jQuery 常见动画函数
  • jQuery 元素中的动画队列
  • jQuery 实现-隐藏侧边栏广告
• 工具函数
  • jQuery 中的遍历
• AJAX
  • jQuery 的 AJAX
  • AJAX 请求参数(Parameters)
• 插件开发
  • jQuery 插件（plugins）开发
• 手写-jQuery
  • MiniJQuery
  • 整体架构
    • init()
    • extend()
    • noConflict()【
• 项目：贝壳
  • jQuery 项目实战

[TOC]

jQuery 概述

jQuery

jQuery 官网：https://jquery.com/

jQuery（/ˈdʒeɪkwɪəri/ ）：是一个快速、小型且功能丰富的 JS 库。它的设计宗旨是“Write Less, Do More”（写得更少，做得更多）。

你可以把它理解为 JS 的一个“工具箱”，它封装了大量常用的、但用原生 JS 写起来很复杂的功能（比如 DOM 操作、事件处理、动画、Ajax 等），提供了一个非常简单易用的 API。这使得开发者可以用更少的代码完成更多的工作，并且无需担心不同浏览器之间的兼容性问题。

• 使 HTML 文档遍历、操作、事件处理、动画和 Ajax 之类的事情变得更加简单。
• 具有易于使用的 API，可在多种浏览器中使用。
• jQuery 结合多功能性和可扩展性，改变了数百万人编写 JS 的方式。

库和框架

随着 JS 的普及，以及越来越多人使用 JS 来构建网站和应用程序

• JS 社区认识到代码中存在非常多相同的逻辑是可复用的。
• 因此社区就开始对这些相同的逻辑的代码封装到一个 JS 文件中。
• 这个封装好的 JS 文件就可称为 JS 库或 JS 框架。

库（Library）：是一个预先编写好并实现了一些特定功能的代码片段的集合。

• 一个库中会包含许多的函数、变量等，可根据需求引入到项目中使用。
• 常见的库：jQuery、Day.js、Lodash 和 React 等

框架（Framework）：是一个完整的工具集，可帮助塑造和组织您的网站或应用程序。

• 提供一个结构来构建整个应用程序，开发人员可以在结构的规则内更安全、更高效地工作。
• 常见的框架：Bootstrap、Angular、Vue、Next.js 等。

jQuery 优缺点

jQuery 的优点：

• 易于学习：相对于其它的前端框架，jQuery 更易于学习，它支持 JS 的编码风格。
• 少写多做（Write less, do more）：
  • jQuery 提供了丰富的功能（DOM 操作、过滤器、事件、动画、Ajax 等）。
  • 可以编写更少可读的代码来提高开发人员的工作效率。
• 优秀的 API 文档：jQuery 提供了优秀的在线 API 文档。
• 跨浏览器支持：提供出色的跨浏览器支持（IE9+），无需编写额外代码。

jQuery 的缺点：

• 代码库一直在增长：自 jQuery 1.5 起超过 200KB
• 不支持组件化开发
• 复杂项目支持差：jQuery 更适合 DOM 操作，当涉及到开发复杂的项目时，jQuery 能力有限。

示例：原生 vs jQuery

• 原生：

  

• jQuery：

  

jQuery 历史

jQuery 历史：

1. 在 2005 年 8 月 22 日，John Resig 首次提出支持 CSS 选择器的 JS 库，语法比现有库（Behaviour）更简洁。

   

2. 在 2006 年之前，John Resig（一名从事自己项目的 Web 开发人员）对编写跨浏览器的 JS 感到非常繁琐。

3. 在 2006 年 1 月 16 日，John Resig 在 BarCamp 的演讲中介绍了他的新库( jQuery )。

4. 之后 John Resig 又花了 8 个月的时间完善 jQuery 库，直到 2006-8-26 才发布了 1.0 版本。

   原本打算使用 JSelect（JS Selectors）命名该库，但域名都已被占用。

jQuery 历史版本

为什么学习 jQuery

jQuery 是一个非常受欢迎的 JS 库，被全球约 7000 万个网站使用。它优秀的设计和架构思想非常值得我们去学习。

jQuery 的座右铭是“Write less , do more”，它易于学习， 非常适合 JS 开发人员学习的第一个库。

前端 JS 库非常多，学习 jQuery 有利于我们学习和理解其它的 JS 库（例如：Day.js、Lodash.js 等）

许多大型科技公司，虽然他们现在不会直接使用 jQuery 来做项目，但在项目中仍然会借鉴很多 jQuery 设计思想。

因此，了解 jQuery 依然是一个好主意。

基本使用

CDN

CDN（内容分发网络，Content Delivery Network， Content Distribution Network）：可以把它想象成一个由众多分布在全球各地的服务器组成的网络。它的主要任务是把网站或应用的内容（比如图片、视频、样式文件等）拷贝并存放在这些服务器上。当用户想要访问这些内容时，CDN 会智能地将用户的请求引导到离他地理位置最近或者响应最快的服务器上，从而提升访问速度，减轻原始服务器的压力。

• 简单理解：CDN 会将资源缓存到遍布全球的网站，用户请求获取资源时，可就近获取 CDN 上缓存的资源，提高资源访问速度，同时分担源站压力。

常用 CDN 分类：

常用的 CDN 服务可以大致分为两种：

• 购买的 CDN 服务：需要购买开通 CDN 服务（会分配一个域名）。
  • 目前阿里、腾讯、亚马逊、Google 等都可以购买 CDN 服务。
• 开源的 CDN 服务：
  • 国际上使用比较多的是 unpkg、 JS Delivr、cdnjs、BootCDN 等。

安装

jQuery 本质是一个 JS 库。

• 核心功能：该库包含了：DOM 操作、选择器、事件处理、动画和 Ajax 等核心功能。
• 现在我们可以简单的理解它就是一个 JS 文件。
• 执行该文件中会给 window 对象添加一个 jQuery 函数（例如：window.jQuery）。
• 接着我们就可以调用 jQuery 函数，或者使用该函数上的类方法。

jQuery 安装方式：

下面我们来看看 jQuery 安装方式有哪些：

• 方式 1：CDN：

  在页面中，直接通过 CDN 的方式引入。

• 方式 2：下载源码引入：

  下载 jQuery 的源文件，并在页面中手动引入。

• 方式 3：包管理器：

  使用 npm 包管理工具安装到项目中（npm 在 Node 基础阶段会讲解）

方式 1：CDN

CDN 方式引入：

当执行完以下代码后会给 window 对象添加 jQuery 和 $ 函数对象。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

示例：简单的 CDN 引入

实现一个 Hello jQuery 的案例：

示例：严谨的 CDN 引入

方式 2：下载源码引入

源码下载地址：

• 官网下载：https://jquery.com/download/
• CDN 下载：https://releases.jquery.com/jquery/
• GitHub 下载：https://github.com/jquery/jquery

示例：下载源码引入

下面使用源码的方式引入 jQuery：

方式 3：包管理器

使用 npm 安装 jquery 到项目中（npm 在 Node 基础阶段会讲解）

npm install jquery
# 或
yarn add jquery

基本使用

示例：jQuery 基本使用-计数器

• 原生实现：

  

• jQuery 实现：

  

监听文档加载

上述计数器代码中，如果 script 标签在计数器元素之前的话，会获取不到这些元素。

这就需要我们使用监听文档加载完毕的事件来解决。

监听文档加载的方式：

1. 原生方式：

   • 监听 document 的 DOMContentLoaded 事件：推荐

2. jQuery 方式：

   1. 监听 document 的 DOMContentLoaded 事件：

      • $(handler) ：推荐，其它方式可以使用但不推荐
      • $(document).ready(handler) ： 已废弃
      • $("document").ready(handler) ： 已废弃
      • $().ready(handler) ：已废弃

   2. 监听 window 的 load 事件：

      • $(window).on('load', handler) : 推荐

      • $(window).load(handler) ： 3.0 中废弃

示例：jQuery 监听 DOMContentLoaded 的方式

示例：监听文档加载

• 原生方式：

  

• jQuery 方式-监听 DOMContentLoaded 事件：

  

• jQuery 方式-监听 load 事件：

  

变量名冲突

变量名冲突：

• 和 jQuery 库一样，许多 JS 库也会使用 $ 作为函数名或变量名。

• 在 jQuery 中，$ 是 jQuery 的别名。

• 如果我们在使用 jQuery 库之前，其它库已经使用了$ 函数或者变量，这时就会出现冲突的情况。

解决方案：调用 jQuery.noConflit() 解决冲突

调用 noConflit() 释放 jQuery 对全局变量 $ 或 jQuery 的控制权，转而使用它返回的对象操作 jQuery。

原理：jQuery 在初始化前会先备份一下全局其它库的 jQuery 和 $ 变量，调用 noConflict 函数只是恢复之前备份的 jQuery 和 $ 变量。

jQuery 函数对象

jQuery 函数

jQuery 是一个工厂函数( 别名$ )，调用该函数，会根据传入参数类型来返回匹配到的元素的集合，一般把该集合称为 jQuery 对象。

• 如果传入假值：返回一个空的集合。
• 如果传入选择器：返回在在 documnet 中所匹配到元素的集合。
• 如果传入元素：返回包含该元素的集合。
• 如果传入 HTML 字符串，返回包含新创建元素的集合。
• 如果传入回调函数：返回的是包含 document 元素集合, 并且当文档加载完成会回调该函数。
• 因为函数也是对象，所以该函数还包含了很多已封装好的方法。如：jQuery.noConflict、jQuery.ready 等

jQuery 函数的参数：

• jQuery( selector [, context ] ) ：selector 是字符串选择器；context 是匹配元素时的上下文，默认值为 document
  • jQuery( selector [, context ] )
  • jQuery( element )
  • jQuery( elementArray )
  • jQuery()
• jQuery( html [, ownerDocument ] )
  • jQuery( html [, ownerDocument ] )
  • jQuery( html )
• jQuery( callback )

jQuery 对象

jQuery 对象：是一个包含所匹配到元素的集合，该集合是类数组对象。

• jQuery 对象是通过调用 jQuery 函数来创建的。
• jQuery 对象中会包含 N（>=0）个匹配到的元素。
• jQuery 对象原型中包含了很多已封装好的方法。例如：DOM 操作、事件处理、动画等方法。

示例：

1. 创建空 jQuery 对象

   const $jq = jQuery()

2. 创建匹配 document 元素的 jQuery 集合对象

   const $jq = jQuery(document)

3. 创建匹配多个 li DOM 元素的 jQuery 集合对象

   const $jq = jQuery('ul li') // 没有上下文参数，默认为上下文为 document
   const $jq = jQuery('ul li', document.querySelector('div')) // 有上下文参数

   

对比 DOMElement

对比 DOMElement：

jQuery 对象与 DOM 对象的区别

1. 获取方式不同：

   • DOMElement：通过原生方式获取：document.querySelector()

   • jQuery：通过调用 jQuery 函数获取：jQuery(selector)

2. 包含关系：jQuery 是一个类数组对象，该对象中会包含所选中的 DOM 对象的集合。

3. 属性和方法不同：

   • jQuery：对象的原型上扩展非常多实用的方法
   • DOMElement：则是 W3C 规范中定义的属性和方法

与 DOMElement 的转换

jQuery 对象转 DOMElement：

• 方法 1: 使用索引

  只能获取到某一个元素

  const firstDiv = $divs[0];

• 方法 2: 使用 get() 方法

  可以获取到所有 DOM 元素

  const firstDiv = $divs.get(0); // 返回集合中的第一个 DOM 元素
  const divs = $divs.get(); // 返回集合中的所有 DOM 元素

• 方法 3: 直接操作单个元素

  $('#myElement').click(function() {
      // this 指向 DOM 元素
      console.log(this.id);
      
      // 需要时再包装成 jQuery 对象
      $(this).addClass('clicked');
  });

DOMElement 转 jQuery 对象：

• 方式1：调用 jQuery(dom)

  var div = document.getElementById('myDiv');
  var jQueryDiv = jQuery(div);

• 方式2：使用 $(dom) 包装

  var div = document.getElementById('myDiv');
  var jQueryDiv = $(div);

jQuery 架构设计图

在开始学习 jQuery 语法之前，我们先来了解一下 jQuery 的架构设计图。

jQuery 架构设计图：

选择器

jQuery 选择器

jQuery 函数支持大部分的 CSS 选择器（Selectors）。

语法：

jQuery('selector')
// 或
$('selector')

选择器：

原生 CSS 选择器：

1. 通配符选择器：*
2. 基本选择器：id、class、元素
3. 属性选择器：[attr]、[atrr="value"]
4. 后代选择器：div > span、div span
5. 兄弟选择器：div + span、div ~ span
6. 交集选择器：div.container
7. 伪类选择器：:nth-child()、:nth-of-type()、:not()
   1. 注意：不支持链接伪类 :hover、:focus ...
8. 内容选择器：
   • :empty（指选中的元素没有子元素或文本）
   • :has(selector)（指选中的元素是否存在某个子元素）

jQuery 扩展的选择器：

1. 可见选择器：:visible、:hidden
2. 结构伪类选择器：:eq()、:odd、:even、:first、:last

示例：

1. 原生选择器

   

2. jQuery 扩展的选择器

   

生成代码片段

代码片段在线生成网站：https://snippet-generator.app/

代码片段模板：

jQuery 过滤器

jQuery 过滤器（Filtering） API ( 即 jQuery 原型上的方法 )

• 1.eq(index): 从匹配元素的集合中，取索引处的元素， eq 全称(equal 等于)，返回 jQuery 对象。
• 2.first() : 从匹配元素的集合中，取第一个元素，返回 jQuery 对象。
• 3.last(): 从匹配元素的集合中，取最后一个元素，返回 jQuery 对象。
• 4.not(selector): 从匹配元素的集合中，删除匹配的元素，返回 jQuery 对象。
• 5.filter(selector): 从匹配元素的集合中，过滤出匹配的元素，返回 jQuery 对象。
• 6.find(selector): 从匹配元素集合中，找到匹配的后代元素，返回 jQuery 对象。
• 7.is(selector|element| . ): 根据选择器、元素等检查当前匹配到元素的集合。集合中至少有一个与给定参数匹配则返回 true。
• 8.odd() :将匹配到元素的集合减少为集合中的奇数，从零开始编号，返回 jQuery 对象。
• 9.even()：将匹配到元素的集合减少到集合中的偶数，从零开始编号，返回 jQuery 对象。
• 10.支持链式调用
• .......

jQuery 文本操作

.text()、.text(text)

• 获取匹配到元素集合中每个元素组合的文本内容，包括它们的后代，或设置匹配到元素的文本内容。
• 相当与原生元素的 textContent 属性。

.html()、html(htmlString)

• 获取匹配到元素集合中第一个元素的 HTML 内容，包括它们的后代，或设置每个匹配元素的 HTML 内容。
• 相当与原生元素的 innerHTML 属性。

.val()、.val(value)

• 获取匹配到元素集合中第一个元素的当前值或设置每个匹配到元素的值。
• 该.val()方法主要用于获取 input,select 和等表单元素的值。
• 相当与获取原生元素的 value 属性。

jQuery CSS 操作

.width()、.width(value)

• 获取匹配到元素集合中第一个元素的宽度或设置每个匹配到元素的宽度。

.height()、height(value)

• 获取匹配到元素集合中第一个元素的高度或设置每个匹配到元素的高度。

.css(propertyName)、.css(propertyNames)

• 获取匹配到元素集中第一个元素样式属性的值，底层是调用 getComputedStyle 函数获取。
• .css( "width" )和.width()之间的区别:
  • width()返回一个无单位的像素值（例如，400），而 css()返回一个具有完整单位的值（例如，400px）

.css(propertyName, value)、.css(properties)

• 为每个匹配到元素设置一个或多个 CSS 属性。
• 调用 css 方法添加样式会直接把样式添加到元素的 style 属性上。

属性操作

Class 属性的操作

.addClass(className)、.addClass(classNames)、.addClass(funcntion)

• 将指定的类添加到匹配元素集合中的每个元素，每次都是追加 class。
• 底层调用的是 setAttribute( "class", finalValue )方法添加 class。

.hasClass(className)

• 是否给任意匹配到的元素分配了该类。
• 底层是通过 getAttribute( "class" ).indexOf()来判断是否存在。

.removeClass()、.removeClass(className)、.removeClass(classNames)、.removeClass(function)

• 给匹配元素集中的每个元素删除单个类、多个类或所有类。
• 底层调用的是 setAttribute( "class", finalValue )方法。

.toggleClass()、.toggleClass(className[,state])、.toggleClass(classNames[,state])

• 根据类的存在或状态参数的值，在匹配到元素的集合中，给每个元素添加或删除一个或多个类。

attributes 和 property 属性的操作

.attr(attributeName)

• 获取匹配元素集和中第一个元素的属性值，底层调用了原生的 getAttribute() API

.attr(attributeName, value)、.attr(attributes)

• 为每个匹配元素设置一个或多个属性，底层调用了原生的 setAttribute() API

.removeAttr(attributeName)

• 在匹配到元素的集中，给每个元素删除一个属性。
• 底层调用了原生的 removeAttribute() API

.prop(propertyName)

• 获取匹配到元素集合中第一个元素的属性值

.prop(propertyName，value)、.prop(propertys)

• 为每个匹配元素设置一个或多个属性。

removeProp(propertyName)

• 删除匹配元素集的属性,( 只能删除用户自定义添加的 prop，不能删除元素本身的属性)。

自定义 data-xx 属性的操作

.data()、.data(key)

• 获取匹配元素集中第一个元素的自定义属性的值

.data(key, value) 、.data(obj)

• 为每个匹配元素设置一个或多个自定义属性

.removeData([name])

• 会删除 data()函数给匹配元素属性添加的数据和 data()函数绑定的自定义属性。
• data 函数添加的属性会被移除，但是如果属性同时在签上定义了就不会被移除。

DOM 操作

jQuery 的 DOM 操作-插入内容

.append(content [, content] ) 、append( function )

• 将参数的内容插入到匹配元素集中每个元素的末尾。
  • content 的类型: DOM element, text node, array of elements and text nodes, HTML string, or jQuery object

.prepend(content [, content] ) 、prepend( function )

• 将参数的内容插入到匹配元素集中每个元素的开头。

.after(content [, content] ) 、after( function )

• 在匹配元素集中的每个元素之后，插入由参数指定的内容。

.before(content [, content])、before( function )

• 在匹配元素集中的每个元素之前，插入由参数指定的内容。

.appendTo(target)

• 将匹配元素集中的每个元素插入到目标元素的末尾。
  • target 的类型：A selector, element, HTML string, array of elements, or jQuery object。

.prependTo(target)

• 将匹配元素集中的每个元素插入到目标元素的开头。

.insertAfter(target)

• 在目标元素之后，插入匹配元素集中的每个元素。

.insertBefore(target)

• 在目标元素之前，插入匹配元素集中的每个元素。

jQuery 的 DOM 操作-移除/替换/克隆

.empty(): 删除匹配元素集的所有子节点，自身不会删除。

.remove( ) 、.remove( [selector] )

• 删除匹配的元素集，自身也会删除。
  • selector 参数：字符串类型选择器。筛选匹配元素集的元素来删除

.replaceAll(target): 用匹配到的元素集替换每个目标元素。

.replaceWidth(newContent)、.replaceWidth( function )

• 用新内容替换匹配元素集中的每个元素，并返回被移除的元素集。
  • newConten 参数的类型： HTML string, DOM element, array of DOM elements, or jQuery object

.clone()、.clone( withDataAndEvents )

• 对匹配的元素集执行深度复制，底层是调用了 elem.cloneNode( true )来复制元素。
  • withDataAndEvents 参数 : 布尔值，是否复制该元素的事件处理程序和数据，默认值为 false。

事件

认识事件（Event）

Web 页面经常需要和用户之间进行交互，而交互的过程中我们可能想要捕捉这个交互的过程：

• 比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置；
• 浏览器需要搭建一条 JS 代码和事件之间的桥梁；
• 当某个事件发生时，让 JS 执行某个函数，所以我们需要针对事件编写处理程序（handler）；

原生事件监听方法：

• 事件监听方式一：在 script 中直接监听（很少使用）。
• 事件监听方式二：DOM 属性，通过元素的 on 来监听事件。
• 事件监听方式三：通过 EventTarget 中的 addEventListener 来监听。

jQuery 事件监听方法：

• 事件监听方式一：直接调用 jQuery 对象中的事件处理函数来监听，例如：click，mouseenter....。
• 事件监听方式二：调用 jQuery 对象中的 on 函数来监听，使用 off 函数来取消监听。

click 和 on 的区别

click 和 on 的区别：

• click 是 on 的简写。它们重复监听，不会出现覆盖情况，都支持事件委托，底层用的是 addEventListener。
• 如果 on 没有使用 selector 的话，那么和使用 click 是一样的。
• on 函数可以接受一个 selector 参数，用于筛选 可触发事件的后代元素。
• on 函数支持给事件添加命名空间。

click 和 on 中 this 指向

click 和 on 的 this 指向：

• this 都是指向原生的 DOM Element

jQuery 的事件冒泡

我们会发现默认情况下事件是从最内层（如下图 span）向外依次传递的顺序，这个顺序我们称之为事件冒泡（Event Bubble）;

事实上，还有另外一种监听事件流的方式就是从外层到内层（如：body -> span），这种称之为事件捕获（Event Capture）；

为什么会产生两种不同的处理流呢？

• 这是因为早期在浏览器开发时，不管是 IE 还是 Netscape 公司都发现了这个问题;
• 但是他们采用了完全相反的事件流来对事件进行了传递；
• IE<9 仅采用了事件冒泡的方式，Netscape 采用了事件捕获的方式；
• IE9+和现在所有主流浏览器都已支持这两种方式。

jQuery 为了更好的兼容 IE 浏览器，底层并没有实现事件捕获。

jQuery 的事件对象( Event Object)

jQuery 事件系统的规范是根据 W3C 的标准来制定 jQuery 事件对象。原始事件对象的大多数属性都被复制到新的 jQuery 事件 对象上。如，以下原生的事件属性被复制到 jQuery 事件对象中： altKey, clientX, clientY, currentTarget, data, detail, key, keyCode, offsetX, offsetY, originalTarget, pageX, pageY, relatedTarget, screenX, screenY, target, ......

jQuery 事件对象通用的属性（以下属性已实现跨浏览器的兼容）：

• target、relatedTarget、pageX、pageY、which、metaKey

jQuery 事件对象常用的方法：

• preventDefault() : 取消事件的默认行为（例如，a 标签、表单事件等）。
• stopPropagation() : 阻止事件的进一步传递（例如，事件冒泡）。

要访问其它事件的属性，可以使用 event.originalEvent 获取原生对象。

jQuery 的事件委托（event delegation）

事件冒泡在某种情况下可以帮助我们实现强大的事件处理模式–事件委托模式（也是一种设计模式）

那么这个模式是怎么样的呢？

• 因为当子元素被点击时，父元素可以通过冒泡监听到子元素的点击；
• 并且可以通过 event.target 获取到当前监听事件的元素（event.currentTarget 获取到的是处理事件的元素）；

案例：一个 ul 中存放多个 li，使用事件委托的模式来监听 li 中子元素的点击事件。

jQuery 常见的事件

鼠标事件（Mouse Events）

• .click() 、.dblclick()、.hover()、.mousedown() 、.mouseup()
• .mouseenter()、.mouseleave()、.mousemove()
• .mouseover()、.mouseout() 、.contextmenu()、.toggle()

键盘事件（Keyboard Events）

• .keydown() 、.keypress()、.keyup()

文档事件（Document Loading Events）

• load、ready()、.unload

表单事件（Form Events）

• .blur() 、.focus()、.change()、.submit()、.select()

浏览器事件（Browser Events）

• .resize()、.scroll()

mouseover 和 mouseenter 的区别

mouseenter()和 mouseleave()

• 不支持冒泡
• 进入子元素依然属于在该元素内，没有任何反应

mouseover()和 mouseout()

• 支持冒泡
• 进入元素的子元素时
  • 先调用父元素的 mouseout
  • 再调用子元素的 mouseover
  • 因为支持冒泡，所以会将 mouseover 传递到父元素中；

jQuery 的键盘事件

事件的执行顺序是 keydown()、keypress()、keyup()

• keydown 事件先发生；
• keypress 发生在文本被输入；
• keyup 发生在文本输入完成（抬起、松开）；

我们可以通过 key 和 code 来区分按下的键：

• code：“按键代码”（"KeyA"，"ArrowLeft" 等），特定于键盘上按键的物理位置。
• key：字符（"A"，"a" 等），对于非字符（non-character）的按键，通常具有与 code 相同的值。）

jQuery 的表单事件

表单事件（Form Events）

• .blur() - 元素失去焦点时触发
• .focus() - 元素获取焦点时触发
• change() - 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
• .submit() - 表单提交时触发
• ......

jQuery-选项卡切换

动画

jQuery 动画操作-animate

.animate()： 执行一组 CSS 属性的自定义动画，允许支持数字的 CSS 属性上创建动画。

• .animate( properties [, duration ] [, easing ] [, complete ] )
• .animate( properties, options )
  • propertys 参数的支持： ➢ 数值：number 、string ➢ 关键字：'show'、'hide'和'toggle' ➢ 相对值：+= 、-= ➢ 支持 em 、% 单位（可能会进行单位转换）。

自定义修改宽高度动画

• height ：100% -> 0
• width： 100% -> 0
• opacity: 1 - > 0

jQuery 常见动画函数

.显示和隐藏匹配的元素

• .hide() 、.hide( [duration ] [, complete ] )、.hide( options ) - 隐藏元素
• .show() 、.show( [duration ] [, complete ] )、.show( options ) - 显示元素
• .toggle() 、.toggle( [duration ] [, complete ] )、.toggle( options ) -显示或者隐藏元素

淡入淡出

• .fadeIn()、.fadeIn( [duration ] [, complete ] )、.fadeIn( options ) - 淡入动画
• .fadeOut()、.fadeOut( [duration ] [, complete ] )、.fadeOut( options ) -淡出动画
• .fadeToggle()、.fadeToggle( [duration ] [, complete ] )、.fadeToggle( options ) - 淡入淡出的切换
• .fadeTo( duration, opacity [, complete ] )- 渐变到

jQuery 元素中的动画队列

jQuery 匹配元素中的 animate 和 delay 动画是通过一个动画队列(queue)来维护的。例如执行下面的动画都会添加到动画队列中：

• .hide() 、 .show()
• .fadeIn() 、.fadeOut()
• .animate()、delay()
• ......

.queue()：查看当前选中元素中的动画队列。

.stop( [clearQueue ] [, jumpToEnd ] )：停止匹配元素上当前正在运行的动画。

• clearQueue ：一个布尔值，指示是否也删除排队中的动画。默认为 false
• jumpToEnd ：一个布尔值，指示是否立即完成当前动画。默认为 false

jQuery 实现-隐藏侧边栏广告

工具函数

jQuery 中的遍历

.each( function )： 遍历一个 jQuery 对象，为每个匹配的元素执行一个回调函数。

• function 参数:
  • Function( Integer index, Element element )， 函数中返回 false 会终止循环。

jQuery.each( array | object , callback ) : 一个通用的迭代器函数，可以用来无缝地迭代对象和数组。

• array 参数：支持数组（array）或者类数组（array-like）,底层使用 for 循环 。
• object 参数: 支持普通的对象 object 和 JSON 对象等，底层用 for in 循环。
• function 参数:
  • Function( Integer index, Element element )， 函数中返回 false 会终止循环。

.each() 和 jQuery.each(）函数的区别：

• .each()是 jQuery 对象上的方法，用于遍历 jQuery 对象。
• jQuery.each( ) 是 jQuery 函数上的方法，可以遍历对象、数组、类数组等，它是一个通用的工具函数。

AJAX

jQuery 的 AJAX

在前端页面开发中，如果页面中的数据是需要动态获取或者更新的，这时我们需要向服务器发送异步的请求来获取数据，然后在无需刷新页面的情 况来更新页面。那么这个发起异步请求获取数据来更新页面的技术叫做 AJAX。

AJAX 全称（Asynchronous Javascript And XML），是异步的 JS 和 XML，它描述了一组用于构建网站和 Web 应用程序的开发技术。

• 简单点说，就是使用 XMLHttpRequest 对象与服务器通信。它可以使用 JS ON，XML，HTML 和 text 文本等格式发送和接收数据。
• AJAX 最吸引人的就是它的“异步”特性。也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

AJAX 请求方法（Method）

• GET、POST、PUT、PACTH、DELETE 等

jQuery 中也有 AJAX 模块，该模块是在 XMLHttpRequest 的基础上进行了封装，语法（Syntax）如下：

• $.ajax( [settings ] ) - 默认用 GET 请求从服务器加载数据，会返回 jQXHR 对象，可以利用该对象的 abort 方法来取消请求。
• $.get( url [, data ] [, success ] [, dataType ] ) - 发起GET请求，底层调用的还是$ajax()
• $.post( url [, data ] [, success ] [, dataType ] ) - 发起POST请求，底层调用的还是$ajax()

初体验 jQuery 中的 AJAX

• https://httpbin.org (是一个专门提供：免费测试 http 服务的网站)

AJAX 请求参数(Parameters)

请求参数（Parameters）

• url - 指定发送请求的 URL。
• method / type - 用于指定请求的类型 (e.g. "POST", "GET", "PUT")，默认为 GET
• data - 指定要发送到服务器的数据（PlainObject or String or Array）
• processData：当 data 是一个对象时，jQuery 从对象的键/值对生成数据字符串，除非该 processData 选项设置为 false. 例如，{ a: "bc", d: "e,f" }被转换为字符串"a=bc&d=e%2Cf"，默认为 true。
• header -请求头的内容（PlainObject）
• contentType - 默认值：application/x-www-form-urlencoded; charset=UTF-8，向服务器发送数据时指定内容类型。
• application/x-www-form-urlencoded; charset=UTF-8： 请求体的数据以查询字符串形式提交，如：a=bc&d=e%2Cf。
• application/json; charset=UTF-8 指定为 json 字符串类型
• 为时 false，代表是 multipart/form-data 。表单类型，一般用于上传文件
• dataType - 期望服务器端发回的数据类型（json、xml、text...），默认会根据响应的类型来自动推断类型。
• timeout - 请求超时时间。它以毫秒为单位。
• beforeSend - 这是一个在发送请求之前运行的函数，返回 false 会取消网路请求。
• success - 请求成功回调的函数
• error -请求失败回调的函数

插件开发

jQuery 插件（plugins）开发

在我们开发时，有时候 jQuery 提供的方法并不能满足我们的需求。如果我们想给 jQuery 扩展一些其它的方法，那这种情况下， 可能需要编写一个插件。

• jQuery 插件其实就是：编写一些新增的方法，并将这些方法添加到 jQuery 的原型对象上。

编写 jQuery 插件的步骤：

• 新建一个插件对应的 JS 文件（命名规范：jquery.插件名.js）
• 在立即执行函数中编写插件，这样可以避免插件中的变量与全局变量冲突。
• 在 jQuery 的原型对象上新增一些的方法。
• 最后在 html 中导入就可以像使用其他 jQuery 对象方法一样使用了
• 到此就开发完一个 jQuery 的插件了。

案例：开发一个 jquery.showlinklocation.js 的插件。

• 功能：让网页上所有的 a 标签文本的后面追加对应的域名地址。

手写-jQuery

MiniJQuery

整体架构

init()

jQuery 共享原型设计：

jQuery 和 jQuery.prototype.init 共享一个原型对象：

1. 调用 $()

   

2. 因为共享一个原型对象，所以可以通过 new jQuery.prototype.init() 返回一个 jQuery 对象实例

   

$.fn 等价于 $.prototype，都是 jQuery 的原型对象：

extend()

$.extend() 的用法：

extend() 可以给任意对象、jQuery、jQuery.fn 扩展

$.extend() 和 $.fn.extend() 的实现：

jQuery.extend 和 jQuery.fn.extend 指向同一个匿名函数。如何区分扩展的目标：

• 任意对象：需要传第二个参数
• jQuery：只需传一个参数
• jQuery.fn：只需传一个参数

1、实现浅拷贝扩展

2、实现深拷贝扩展

浅拷贝问题：后者覆盖了前者，而非追加

深拷贝使用：

• 第一个参数为 true 表示深拷贝，为 false 表示浅拷贝

使用 extend() 扩展工具方法：判断纯对象类型、判断数据类型

noConflict()【

项目：贝壳

jQuery 项目实战

项目的目录结构：

项目的接口地址

• baseURL：http://123.207.32.32:9060/beike/api
• 首页数据(GET)：baseURL + /homePageInfo
• 搜索接口(GET)：baseURL + /sug/headerSearch?cityId=440100&cityName=广州&channel=site&keyword=白云山 &query=白云山
• 热门推荐(GET)：baseURL + /site/rent
• 城市数(GET)据：baseURL + /city